@import '@styles/variables.scss';
@import '@styles/mixins.scss';

.text-input {
    width: 100%;

    &__input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid $border-color;
        border-radius: $border-radius-md;
        font-size: $font-size-sm;
        color: $text-primary;
        background: $background-primary;
        transition: all $transition-fast $easing-ease;

        &:focus {
            outline: none;
            border-color: $primary-color;
        }

        &::placeholder {
            color: $text-tertiary;
        }

        &:disabled {
            background: $background-secondary;
            cursor: not-allowed;
        }
    }
}